<div id="container">
    <div>
        <img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo.jpg"/>
    </div>
</div>
<style>

#container{
    overflow:hidden;
    position:relative;
}

#container div{
    transition:all 700ms linear;
}

#container div:hover{
    cursor:move;
}
img{
    display:none;
}
</style>
<script type="text/javascript">
var div = container.querySelector('div');
var img = container.querySelector('img');
img.onload = function() {
    div.style.background = "url(" + img.src +") repeat";
    div.style.width = img.width + 'px';
    div.style.height = img.height + 'px';
};
var moving = false;
var position = 0;
var start = 0;

var move = function(e) {
    if (!moving) return;
    var distance = e.clientX - start;
    this.style.backgroundPosition = position + distance + 'px ' + '0px';
};
var down = function(e) {
    start = e.clientX;
    moving = true;
};
var up = function(e) {
    position += e.clientX -start;
    moving = false;
};
div.addEventListener('mousemove', move, false);
div.addEventListener('mousedown', down, false);
div.addEventListener('mouseup', up, false);
</script>